<!-- 132 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button
      class="t9-form-wideget-btn-default"
        type="primary"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="MaskInformation"
      :rules="rules"
     :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="t9-form-wideget-input-default"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
            >
             <a-select-option value="ARRAY">ARRAY</a-select-option>
            <a-select-option value="CF">CF</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label="$t('T9_maskSpec')"
            name="maskSpec"
            prop="maskSpec"
          >
            <a-select
              v-model:value="queryForm.maskSpec"
              class="t9-form-wideget-input-default"
              show-search
              allow-clear
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in options.maskSpecList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_maskState')" name="maskState" prop="maskState">
            <a-select
              v-model:value="queryForm.maskState"
              class="t9-form-wideget-input-default"
              allow-clear
              show-search
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in maskStateArr"
                :key="item.enumValue"
                :value="item.enumValue"
              >
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_maskName')" name="maskName" prop="maskName">
            <a-input  class="t9-form-wideget-input-default" v-model:value="queryForm.maskName" allow-clear :placeholder="$t('common_pleaseEnter1')" />
          </a-form-item>
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId">
            <a-select
              v-model:value="queryForm.eqpId"
              class="t9-form-wideget-input-default"
              show-search
              allow-clear
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in options.eqpIdList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
    </t-query-form>
         <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="6" class="global-oper-row-title">{{
        $t("T9_maskList")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button class="t9-form-wideget-btn-default" :loading="exportBtnLoading" @click="getExport" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table">
    <t-table align="center" :data="list.tableData"  max-height="100%" :loading="searchBtnLoading">
      <t-column :title="$t('T9_rowNum')" type="seq" width="100"></t-column>
      <t-column min-width="120" field="lastEventTime" :title="$t('T9_lastEventTime')" />
      <t-column min-width="100" field="maskName" :title="$t('T9_maskName')" />
      <t-column min-width="100" field="maskSpec" :title="$t('T9_maskSpec')" />
      <t-column min-width="100" field="maskState" :title="$t('T9_maskState')" />
      <t-column min-width="100" field="caseName" :title="$t('T9_caseName')" />
      <t-column min-width="100" field="priority" :title="$t('T9_priority')" />
      <t-column min-width="100" field="eqpId" :title="$t('T9_eqpId')" />
      <t-column min-width="100" field="unitId" :title="$t('T9_unitId')" />
      <t-column min-width="100" field="layerId" :title="$t('T9_layerId')" />
      <t-column min-width="160" field="materialLocationName" :title="$t('T9_materialLocationName')" />
      <t-column min-width="120" field="maskUsedLimit" :title="$t('T9_maskUsedLimit')" />
      <t-column min-width="100" field="maskUsed" :title="$t('T9_maskUsed')" />
      <t-column min-width="120" field="maskHoldState" :title="$t('T9_maskHoldState')" />
      <t-column min-width="100" field="timeUsed" :title="$t('T9_timeUsed')" />
      <t-column min-width="120" field="timeUsedLimit" :title="$t('T9_timeUsedLimit')" />
      <t-column min-width="120" field="durationUsed" :title="$t('T9_durationUsed')" />
      <t-column min-width="140" field="durationUsedLimit" :title="$t('T9_durationUsedLimit')" />
      <t-column min-width="120" field="repairCount" :title="$t('T9_repairCount')" />
      <t-column min-width="120" field="maskCleanState" :title="$t('T9_maskCleanState')" />
      <t-column min-width="120" field="lastCleanTime" :title="$t('T9_lastCleanTime')" />
      <t-column min-width="100" field="mountTime" :title="$t('T9_mountTime')" />
      <t-column min-width="100" field="maskNote" :title="$t('T9_maskNote')" />
      <t-column min-width="100" field="currentSite" :title="$t('T9_currentSite')" />
      <t-column min-width="100" field="controlSite" :title="$t('T9_controlSite')" />
      <t-column min-width="100" field="orientedSite" :title="$t('T9_orientedSite')" />
      <t-column min-width="100" field="cleanCount" :title="$t('T9_cleanCount')" />
    </t-table>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'MaskInformation',
    components: {},
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        exportBtnLoading: false,
        export: false,
        maskStateArr: [],
        list: {
          tableData: []
        },
        options: {
        },
        queryForm: {
          shopId: 'ARRAY',
          maskSpec: undefined,
          maskState: undefined,
          maskName: undefined,
          eqpId: undefined
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        }
      }
    },
    computed: {
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.initOptions([{ name: 'eqpId', params: { shopId, bayId: '', version: '80024' } }])
          this.initOptions([{ name: 'maskSpec', params: { shopId } }])
          this.getMaskState()
        },
        immediate: true
      }
    },
    created() {
      this.initOptions([{ name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: '', version: '80024' } }])
    },
    methods: {
      getMaskState() {
        const params = {
          enumName: this.queryForm.shopId === 'ARRAY' ? 'ArrayMaskState' : 'CfMaskState',
          usage: ''
         }
         api.getMaskState(params).then(res => {
           this.maskStateArr = res
         })
      },
      getExport() {
       if (!this.list.tableData.length) return
       if (this.exportBtnLoading) return
       this.exportBtnLoading = true
         const obj = {
          dtoName: 'MaskInformationDTO',
          queryId: 'GetMaskList',
          version: '80003',
          menuName: 'maskInformation',
          usage: 'getMaskList',
          export: true,
          ...this.queryForm
        }
        api.getList(obj).then(res => {
          downloadBlobFile(res, 'maskList')
          this.exportBtnLoading = false
        }).catch(error => {
          this.exportBtnLoading = false
          console.log(error)
        })
      },
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      getList() {
         if (this.searchBtnLoading) return
            this.searchBtnLoading = true
        const obj = {
          dtoName: 'MaskInformationDTO',
          queryId: 'GetMaskList',
          version: '80003',
          menuName: 'maskInformation',
          usage: 'getMaskList'
        }
        api.getList({ ...obj, ...this.queryForm }).then(res => {
          this.list.tableData = res
          this.searchBtnLoading = false
        }).catch(error => {
          this.searchBtnLoading = false
          console.log(error)
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.t9-form-wideget-input-default {
  width: 150px;
}
</style>
